<div class="content-section introduction">
    <div>
        <span class="feature-title">Captcha</span>
        <span>Captcha is a form validation component based on Recaptcha.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-growl [value]="msgs" sticky="sticky"></p-growl>
    
    <p-captcha siteKey="6Lf2XQkTAAAAANcvOwYqPxWL4iZDksFqHpS39GDA" (onResponse)="showResponse($event)"></p-captcha>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;CaptchaModule&#125; from 'primeng/primeng';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>Captcha is used with a siteKey and a callback to verify the response.</p>
            
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-captcha siteKey="YOUR_SITE_KEY" (onResponse)="showResponse($event)"&gt;&lt;/p-captcha&gt;
</code>
</pre>

            <p>In addition include the captcha widget resource to your page.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=initRecaptcha" async defer>&lt;/script&gt;
</code>
</pre>

            <p>Global callback name is initRecaptcha by default and it can be changed using initCallback property .</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=loadCaptcha" async defer>&lt;/script&gt;
</code>
</pre>

<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-captcha siteKey="YOUR_SITE_KEY" (onResponse)="showResponse($event)" initCallback="loadCaptcha"&gt;&lt;/p-captcha&gt;
</code>
</pre>


            <h3>Verification</h3>
            <p>In order to ensure if a response token is valid, verification against recaptcha api needs to be done at backend. <a href="https://developers.google.com/recaptcha/docs/verify">Read more</a> at 
            official documentation.</p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
showResponse(response) &#123;
    //call to a backend to verify against recaptcha with private key
&#125;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>sitekey</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Public sitekey.</td>
                        </tr>
                        <tr>
                            <td>theme</td>
                            <td>string</td>
                            <td>light</td>
                            <td>The color scheme of the widget.</td>
                        </tr>
                        <tr>
                            <td>type</td>
                            <td>string</td>
                            <td>image</td>
                            <td>The type of CAPTCHA to serve.</td>
                        </tr>
                        <tr>
                            <td>size</td>
                            <td>string</td>
                            <td>normal</td>
                            <td>The size of the widget.</td>
                        </tr>
                        <tr>
                            <td>tabindex</td>
                            <td>number</td>
                            <td>0</td>
                            <td>The tabindex of the widget and challenge.
                                If other elements in your page use tabindex, 
                                it should be set to make user navigation easier.
                            </td>
                        </tr>
                        <tr>
                            <td>language</td>
                            <td>string</td>
                            <td>en</td>
                            <td>Language of the widget.</td>
                        </tr>
                        <tr>
                            <td>initCallback</td>
                            <td>string</td>
                            <td>initRecaptcha</td>
                            <td>Name of global callback to initialize recaptcha.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Parameters</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onResponse</td>
                            <td>event.response: The user response token.</td>
                            <td>The callback function to be executed when the user submits a successful CAPTCHA response.</td>
                        </tr>
                        <tr>
                            <td>onExpire</td>
                            <td>-</td>
                            <td>The callback function to be executed when the recaptcha response expires and the user needs to solve a new CAPTCHA.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3>Methods</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>reset</td>
                            <td>-</td>
                            <td>Resets the reCAPTCHA widget.</td>
                        </tr>
                        <tr>
                            <td>getResponse</td>
                            <td>-</td>
                            <td>Gets the response for the reCAPTCHA widget.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3>Official Documentation</h3>
            <a href="https://developers.google.com/recaptcha/docs/display">Here</a>

            <h3>Dependencies</h3>
            <p>Google Recaptcha V2</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/captcha" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-growl [value]="msgs" sticky="sticky"&gt;&lt;/p-growl&gt;

&lt;p-captcha siteKey="6Lf2XQkTAAAAANcvOwYqPxWL4iZDksFqHpS39GDA" (onResponse)="showResponse($event)"&gt;&lt;/p-captcha&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class CaptchaDemo &#123;
    
    msgs: Message[] = [];
    
    showResponse(event) &#123;
        this.msgs = [];
        this.msgs.push(&#123;severity:'info', summary:'Succees', detail: 'User Responded'&#125;);
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>